<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      /*img {*/
      /*    filter: url(#mosaic);*/
      /*}*/
      img{
          width: 500px;
          height: 500px;
      }
      .mosaic{
          image-rendering: pixelated;
      }
  </style>
</head>
<body>
<h1>原图</h1>
<img src="./images/1.jpg" alt="" >
<h1>马赛克</h1>
<img src="./images/1.jpg" alt="" class="mosaic">

<svg>
  <filter id="mosaic">
    <feFlood x="4" y="4" height="2" width="2"/>
    <feComposite width="8" height="8"/>
    <feTile result="a"/>
    <feComposite in="SourceGraphic" in2="a" operator="in"/>
    <feMorphology operator="dilate" radius="4"/>
  </filter>
</svg>
<script>
const mosaic =document.querySelector('.mosaic')
let isFirst = true
mosaic.onload= function (e) {
  if(isFirst){
    const {clientWidth,clientHeight} = this
    const canvas = document.createElement('canvas')
    canvas.width = clientWidth / 6
    canvas.height = clientHeight /6
    const ctx = canvas.getContext('2d')
    ctx.drawImage(this,0,0,canvas.width,canvas.height)
    console.log(canvas.toDataURL())
    this.src = canvas.toDataURL()
    isFirst = false
  }

}
</script>
</body>
</html>